<template>
	<PageSkeletonVue v-if="false"></PageSkeletonVue>
	<template v-else>
		<view class="homePage">
			<headerFixedBarVue backIcon="" :backgroundColor="headerBackgroundColor" title=""></headerFixedBarVue>
			<view class="search-container">
				<view class="search-box" :style="searchBoxStyle">
					<!-- <text class="iconfont icon-search"></text> -->
					<uni-icons type="search" size="20" color="#999" style="margin-right: 10rpx;"></uni-icons>
					<input type="text" placeholder="搜索目的地" placeholder-class="search-placeholder" disabled @tap="toSearch"/>
				</view>
			</view>
			<view class="swiperBox" @click="toMap">
				<headerSwiperVue :swiperImg="swiperImg" :swiperHeight="1136"></headerSwiperVue>
			</view>
			<view class="content">
				<LookWestVue></LookWestVue>

				<LoopCardVue></LoopCardVue>
				<HotVue></HotVue>
				<ExploreMoreVue></ExploreMoreVue>
				<view class="seeAll">
					<text @click="toAllLoop">查看全部环线</text>
				</view>
			</view>
			<bottomNavBar></bottomNavBar>
		</view>
	</template>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		getImglist
	} from '@/config/API/home.js'
	import headerFixedBarVue from '@/components/headerFixedBar.vue';
	import headerSwiperVue from '@/components/headerSwiper.vue';
	import bottomNavBar from '@/components/bottomNavBar.vue';
	import LoopCardVue from './components/LoopCard.vue';
	import LookWestVue from './components/LookWest.vue';
	import HotVue from './components/Hot.vue';
	import ExploreMoreVue from './components/ExploreMore.vue';
	import PageSkeletonVue from './components/PageSkeleton.vue';
	import {
		routerGuard
	} from '@/config/RouteGuard.js'
	// 骨架是否加载中
	const isLoading = ref(false)
	const swiperImg = ref([])
	const searchBoxStyle = ref({})
	const searchBoxBorder = ref('none')

	const headerBackgroundColor = ref('transparent');
	const updateSearchBoxStyle = () => {
		const systemInfo = uni.getSystemInfoSync()
		const menuButton = uni.getMenuButtonBoundingClientRect()
		
		searchBoxStyle.value = {
			top: menuButton.top + 'px',
			height: menuButton.height + 'px',
			right: (systemInfo.windowWidth - menuButton.left + 48) + 'px',
			left: '24rpx',
			position: 'fixed',
			display: 'flex',
			alignItems: 'center',
			background: 'rgba(255, 255, 255, 0.6)',
			borderRadius: '32rpx',
			padding: '0 20rpx',
			backdropFilter: 'blur(15px)',
			border: searchBoxBorder.value
		}
	}

	const onPageScroll = (e) => {
		const scrollThreshold = 100;
		if (e.scrollTop > scrollThreshold) {
			headerBackgroundColor.value = '#fff';
			searchBoxBorder.value = '1px solid #f5f6f7';
		} else {
			headerBackgroundColor.value = 'transparent';
			searchBoxBorder.value = 'none';
			searchBoxBorder.value = '1px solid #f5f6f7';

		}
		updateSearchBoxStyle()
	};

	// 在uni-app中注册页面滚动事件
	if (typeof getCurrentPages === 'function') {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		currentPage.onPageScroll = onPageScroll;
	}
	onMounted(() => {
		updateSearchBoxStyle()
	})
	
	onShow(async () => {
		isLoading.value = true
		const getHomeimg = await getImglist()
		swiperImg.value = getHomeimg.data.map(item => (item.index_img))
		console.log('aa', swiperImg.value)
		// 模拟异步请求
		setTimeout(() => {
			isLoading.value = false
		}, 1000)
	})
	const toMap = () => {
		uni.navigateTo({
			url: '/homeSubpages/TXmap/TXmap?id=1'
		})
	}
	const toAllLoop = () => {

		const url = `/pages/allDestination/allDestination`;
		routerGuard(url);
	}
	const toSearch = () => {
		uni.navigateTo({
			url: '/pages/search/index'
		})
	}
</script>

<style lang="scss" scoped>
	.homePage {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f6f7;
		padding-bottom: 110rpx;

		.search-container {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 10;
			
			.search-box {
				.icon-search {
					font-size: 28rpx;
					color: #333;
					margin-right: 10rpx;
				}
				
				input {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
				}
				
				.search-placeholder {
					color: #999;
					margin-left: 10rpx;
				}
			}
		}

		.swiperBox {
			overflow: hidden;
			border-radius: 0 0 20rpx 20rpx;
		}

		.content {
			width: 100%;
			padding: 50rpx 22rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			gap: 30rpx;

			.seeAll {
				width: 100%;
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					border: 1rpx solid #999;
					font-size: 28rpx;
					font-weight: 400;
					padding: 15rpx 50rpx;
					border-radius: 50rpx;
				}
			}
		}
	}
</style>